<template>
  <div class="CarRegisterPage">
    <el-card>
      <el-form :model="formData" ref="formRef">
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="运输任务编号："
              label-width="120px"
              prop="transportTaskId"
            >
              <el-input
                placeholder="请输入运输任务编号"
                v-model="formData.transportTaskId"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8"
            ><el-form-item
              label="起始地机构："
              label-width="120px"
              prop="startAgencyId"
            >
              <el-select
                ref="selectRef"
                clearable
                v-model="formData.startAgencyId"
                placeholder="请选择起始地机构"
              >
                <el-option
                  :value="formData.startAgencyId"
                  :label="label"
                  style="height: auto"
                >
                  <el-tree
                    :data="treeData"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                  ></el-tree>
                </el-option>
              </el-select> </el-form-item
          ></el-col>
          <el-col :span="8"
            ><el-form-item
              label="目的地机构："
              label-width="120px"
              prop="endAgencyId"
            >
              <el-select
                ref="selectRef11"
                clearable
                v-model="formData.endAgencyId"
                placeholder="请选择目的地机构"
              >
                <el-option
                  :value="formData.endAgencyId"
                  :label="label2"
                  style="height: auto"
                >
                  <el-tree
                    :data="treeData"
                    :props="defaultProps"
                    @node-click="handleNodeClickfn"
                    :node-key="treeData.id"
                  ></el-tree>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item
              label="回车时间："
              label-width="120px"
              prop="intoStorageStartTime"
            >
              <el-date-picker
                @change="dateChange"
                style="width: 215px"
                v-model="timeArray"
                type="datetimerange"
                align="right"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '00:00:00']"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="车辆是否可用："
              label-width="120px"
              prop="isAvailable"
            >
              <el-select v-model="formData.isAvailable" placeholder="请选择">
                <el-option
                  v-for="item in Options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option> </el-select
            ></el-form-item>
          </el-col>
          <el-col :span="8" style="padding-left: 25px">
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card style="margin-top: 20px">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%; border: 1px solid #ebeef5"
      >
        <el-table-column
          prop="transportTaskId"
          label="运输任务编号"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="startAgencyName" label="起始地机构" width="180">
        </el-table-column>

        <el-table-column prop="endAgencyName" label="目的地机构">
        </el-table-column>
        <el-table-column
          prop="transportOrderNumber"
          label="运单数量"
          width="50"
        >
        </el-table-column>
        <el-table-column prop="outStorageTime" label="出车时间" width="180">
        </el-table-column>
        <el-table-column prop="intoStorageTime" label="回车时间" width="180">
        </el-table-column>
        <el-table-column prop="licensePlate" label="车牌号码">
        </el-table-column>
        <el-table-column prop="isAvailable" label="车牌是否可用">
          <template #default="{ row }">
            <div
              v-if="row.isAvailable === true"
              style="
                display: inline-block;
                background-color: #1dc779;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 5px;
              "
            ></div>
            <span>{{ row.isAvailable === true ? "可用" : "不可用" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="{ row }">
            <el-link
              style="color: #419eff"
              :underline="false"
              @click="$router.push(`/transit/car-register-info/${row.id}`)"
              >查看</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { getReturnRegisterApi } from "@/api/car-models";
import { getTreeListApi } from "@/api/organization-manage";
// const isAvailableMap = {
//   true: "可用",
//   false: "不可用",
// };
export default {
  name: "CarRegisterPage",
  data() {
    return {
      formData: {
        endAgencyId: "",
        intoStorageEndTime: "",
        intoStorageStartTime: "",
        isAvailable: "",
        page: 1,
        pageSize: 10,
        startAgencyId: "",
        transportTaskId: "",
      },

      value: "",
      tableData: [{}],
      page: 1,
      pageSize: 10,
      Options: [
        { label: "全部", value: null },
        { label: "可用", value: "true" },
        { label: "不可用", value: "false" },
      ],
      startOptions: [],
      treeData: [],
      defaultProps: {
        label: "name",
        children: "children",
      },
      label: "",
      label2: "",
      timeArray: [],
    };
  },
  created() {
    this.getReturnRegister();
    this.getTreeList();
  },
  methods: {
    // 选定时间
    dateChange(value) {
      console.log(value);
      // this.formData.startAgencyId = value[1];
      console.log(value[0]);
    },
    reset() {
      this.formData = {
        endAgencyId: "",
        intoStorageEndTime: "",
        intoStorageStartTime: "",
        isAvailable: "",
        page: 1,
        pageSize: 10,
        startAgencyId: "",
        transportTaskId: "",
      };
      this.$refs.formRef.resetFields();
      this.label = "";
      this.label2 = "";
      this.timeArray = [];
      this.getReturnRegister();
      // console.log(this.$refs.formRef);
    },
    async search() {
      this.getReturnRegister();
    },
    handleNodeClick(data) {
      // console.log(data);
      // console.log(node);
      this.label = data.name;
      this.formData.startAgencyId = data.id;
      this.$refs.selectRef.blur();
    },
    handleNodeClickfn(data) {
      this.label2 = data.name;
      this.formData.endAgencyId = data.id;
      this.$refs.selectRef11.blur();
    },
    async getReturnRegister() {
      const res = await getReturnRegisterApi(this.formData);
      console.log(res);
      this.tableData = res.data.items;
      // console.log(this.tableData[0].isAvailable);
      // this.tableData.forEach((item) => {
      //   item.isAvailable = isAvailableMap[item.isAvailable];
      // });
    },
    async getTreeList() {
      const { data: res } = await getTreeListApi();
      // console.log(res);
      this.treeData = JSON.parse(res);
      console.log(this.treeData);
    },
  },
};
</script>

<style lang="scss" scoped></style>
